<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="../../js/vue.js"></script>
    <style>
      /*斗篷样式*/
      [v-cloak]{
        display: none;
      }
    </style>
</head>
<body>

<div id="app">
    <!--  胡子语法-->
    <h3>{{text}}</h3>

    <!--  v-model双向绑定-->
    <input v-model="text">

    <h3>胡子语法和v-text</h3>
    <div>{{text}} == {{text}}</div>
    <div v-text="text + '==' + text"></div>

    <h3>v-pre : 用于显示原本的Mustache语法，也就是不解析vue的胡子语法。</h3>
    <div>{{text}}</div>
    <div v-pre>{{text}}</div>

    <h3>v-html : 会将String的html解析出来并且进行渲染</h3>
    <div>{{text1}}</div>
    <div v-html="text1"></div>
    <div v-html="text2"></div>

    <h3>v-once : 该指令表示元素和组件，只渲染一次，不会随着数据改变</h3>
    <div>{{text}}</div>
    <div v-once>{{text}}</div>

    <h3>v-cloak : 对未编译的Mustache标签进行样式定义</h3>
    <div>未加斗篷：{{text}}</div>
    <div v-cloak>加了斗篷：{{text}}</div>
</div>

<script>
    // 延迟1秒执行
    window.setTimeout(()=>{
        //
        var v = new Vue({
        el:"#app",
        data : {
            text : "vue框架",
            text1 : "<a href='http://baidu.com'>百度</a>",
            text2 : "{{text}}"
        }
    });
  }, 1000);


</script>

</body>
</html>